import React, { useState, useEffect } from 'react';

const Select = (props) => {
    const { data } = props
    const [value, setValue] = useState('');
    const [selectFlag, setSelectFlag] = useState(0);
    const [selectVal, setSelectVal] = useState('condition');
    const [buttonstyle, setButtonstyle] = useState(1);
    const [options, setOptions] = useState([
        {
            value: "选项1",
            label: "养殖场01 ",
        },
        {
            value: "选项2",
            label: "养殖场02",
        },
        {
            value: "选项3",
            label: "养殖场03",
        },
        {
            value: "选项4",
            label: "养殖场04",
        },
        {
            value: "选项5",
            label: "养殖场05",
        },
    ]);

    useEffect(() => {
        setOptions(data)
        setValue(data[0].label)
    }, []);

    const inputChange = (e) => {
        setValue(e.target.value)
    }
    const selectEquipment = (e) => {
        setValue(e)
        setSelectFlag(0)
    }
    const inputFocus = (e) => {
        // setSelectFlag(1)
    }

    return <>
        <div className="select-box" >
            <input click="selectGoods" value={value} onChange={inputChange} onClick={() => { setSelectFlag(!selectFlag) }} onFocus={inputFocus} />
            {/* <div click="selectGoods" > {value} </div> */}
            <div className="fade">
                {selectFlag ? <div className="terminalList" >
                    {options && options.map((item, index) => <div className='terminal-item' key={index} onClick={() => { selectEquipment(item.label) }}>
                        <span>{item.label}</span>
                    </div>)}
                </div>
                    : null}
            </div>
            <div className="Icon" onClick={() => { setSelectFlag(!selectFlag) }}></div>
        </div >
    </>
}



export default Select;


{/* <template>
    <div class="select-box">
        <input @click="selectGoods" v-model="input" placeholder="" />
        <transition name="fade">
            <ul class="terminalList" v-show="isShow">
                <li v-for="(item, index) in options" :key="index" class="terminal-item"
                @click="selectEquipment(item, index)" :class="{'active-class': activeIndex === index }">
                <span>{{ item.label }}</span>
            </li>
        </ul>
    </transition>
    <div class="Icon"></div>
</div>
</template > */}

{/* <script>
export default {
    props: { list: Array, flag: Number, numberId: Number, inputReset: Boolean },
    data() {
        return {
            isShow: false,
            activeIndex: "",
            input: "",

            options: [
                {
                    value: "选项1",
                    label: "账号1 ",
                },
                {
                    value: "选项2",
                    label: "账号2",
                },
                {
                    value: "选项3",
                    label: "账号3",
                },
                {
                    value: "选项4",
                    label: "账号4",
                },
                {
                    value: "选项5",
                    label: "账号5",
                },
            ],
        };
    },
    watch: {
        list: {
            handler(newVal, oldVal) {
                this.options = newVal
            },
            deep: true,
            immediate: true
        },

        inputReset: {
            handler(newVal, oldVal) {
                this.input = '';
            },
            deep: true,
            immediate: true
        },

    },
    mounted() {
        this.options = this.list
    },
    methods: {
        w(value) {
            return value / 30.66 * 1 + "vw";
        },
        h(value) {
            return value / 17.3 * 1 + 'vh';
        },
        selectGoods() {
            this.isShow = !this.isShow;
        },
        selectEquipment(item, index) {
            this.activeIndex = index;
            this.input = item.label;
            this.isShow = false;
            this.$emit('funform', this.input)
        },
    },
};
</script> */}

{/* <style  lang="less" scoped>
@plugin '@/plugin.js';

.select-box {
    width: 100%;
    height: 100%;
    z-index: 99;
    position: relative;

    .Icon {
        position: absolute;
        right: w(30);
        top: 50%;
        transform: translateY(-50%);
        width: w(37);
        height: h(36);
        background: url(../assets/emergencyResponse/IconSelect.png) no-repeat center center /100% 100%;
    }
}

.select-box input {
    height: 100%;
    width: 100%;
    line-height: 100%;
    text-align: left !important;
    background: transparent;
    outline: none;
    outline-style: none;
    border: 0;
    color: #fff;
    font-size: w(32);
    text-indent: w(50);
}

.terminalList {
    overflow: hidden;
    position: absolute;
    left: 0px;
    top: 100%;
    width: 100%;
    background: rgba(29, 81, 121, 0.986);
    border-radius: calc(4/19.2*1vw);
    border: 1px solid #325698;
    z-index: 888
}

.terminal-item {
    width: 100%;
    height: h(98);
    // color: #b6f4ff;
    margin: h(5) auto;
    padding: 0px w(50);
    display: flex;
    box-sizing: border-box;
    flex-direction: row;

    justify - content: space - between;
    align - items: center;
    cursor: pointer;
    font - size: w(32);
    font - family: SourceHanSansCN - Regular, SourceHanSansCN;
    font - weight: 400;
    color: #FFFFFF;
}

.active - class {
    background- color: rgba(9, 69, 92, 0.4);
}

.fade - enter - active,
.fade - leave - active {
    transition: opacity 0.4s;
}

.fade - enter,
.fade - leave - to{
    opacity: 0;
}
</style >  */}
